<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06_事件监听</title>
</head>
<body>

<button onclick="alert('点击了按钮1！')">按钮1</button>
<button id="btn">按钮2</button>
<hr>
<h4>今天星期四</h4>
<span>震惊：Xxx居然在家XXX</span>
<h4>后天星期三</h4>

<div>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci dicta distinctio dolores eius est eveniet
        iste laborum molestiae, nisi non, nostrum nulla officia placeat quis repudiandae, tempora veritatis vitae
        voluptatum.
    </div>
    <div>Illum magni mollitia officia possimus praesentium temporibus vero! Blanditiis debitis dolorem necessitatibus
        quia? Consectetur consequuntur dolore, dolorem dolorum expedita iste itaque maxime nemo nostrum nulla quis,
        sapiente totam velit! Id!
    </div>
    <div>Adipisci aliquid autem commodi corporis deleniti dicta earum, eius fuga fugit in ipsa laborum magnam magni
        numquam omnis optio repudiandae similique tempore tenetur veniam. Aut corporis dolor doloremque eveniet optio.
    </div>
    <div>Ab amet blanditiis dolor ducimus impedit labore molestias neque quisquam quod tenetur! Architecto dolorum
        excepturi hic perspiciatis quibusdam. Debitis fugiat illum natus. Consequuntur earum eos illo maiores mollitia,
        possimus tempore?
    </div>
    <div>Accusantium alias animi culpa eveniet, harum itaque laborum nostrum odit optio pariatur perspiciatis porro
        possimus praesentium quia quibusdam quisquam quos repellendus tempore? At dicta labore magnam molestiae possimus
        saepe sapiente.
    </div>
    <div>A accusantium ad adipisci alias asperiores aspernatur assumenda at commodi deleniti dolorum ex expedita in
        libero magni molestias nobis nulla, odio omnis optio, perferendis quam quod reiciendis repudiandae tempore,
        veritatis?
    </div>
    <div>Alias dolore ea qui reiciendis sed suscipit voluptatum! Error fugit, nesciunt. Aliquid at beatae debitis
        doloremque dolorum enim magni neque obcaecati quas quibusdam quis, sequi sunt tempora tenetur unde velit.
    </div>
    <div>Consequatur ducimus eveniet exercitationem id molestiae non nulla provident quasi sit unde. Dicta dolorum
        eligendi facilis fugit id laboriosam minus sapiente ut? Accusantium architecto autem dolores facere impedit
        placeat reprehenderit!
    </div>
    <div>Ab aliquam at cupiditate earum eius eligendi error explicabo fugiat ipsa nam natus nihil odio odit officiis
        omnis perferendis, quam quidem saepe, sapiente sit ullam ut vel veniam vero voluptatibus!
    </div>
    <div>At doloribus eos, incidunt ipsum nihil nisi ratione rem unde? Deleniti dignissimos ea facere nisi recusandae!
        Cumque, doloremque ex exercitationem id mollitia nobis porro quae quos, repellat sequi sint vel.
    </div>
    <div>Ab, aliquam dicta dolore ducimus eius esse eum fuga fugit id labore laborum praesentium quidem similique soluta
        voluptatibus. Consequatur error impedit laborum mollitia natus perferendis, quidem ratione sit tempora? Facere?
    </div>
    <div>Amet aperiam architecto assumenda debitis dignissimos dolores, eaque incidunt inventore porro quos repudiandae
        soluta ullam voluptate voluptatibus voluptatum. Ab beatae debitis fugit iure laborum minus pariatur, quae
        quisquam velit voluptate.
    </div>
    <div>Aliquam amet aperiam aspernatur aut beatae cupiditate debitis distinctio esse est facere fugiat illum ipsum
        magnam modi neque nulla possimus quibusdam, quis reiciendis repudiandae, totam velit voluptate. Iure odio, unde.
    </div>
    <div>Aliquid, aspernatur cupiditate deserunt dolores dolorum fugiat, maxime nostrum numquam qui sit tempora tempore,
        ullam ut voluptas voluptates! Adipisci deserunt dolorum fugiat impedit labore maiores modi placeat quaerat qui
        veniam?
    </div>
    <div>Ea eligendi error laboriosam rerum tempora. A, earum id illo in praesentium qui voluptas. Assumenda, corporis,
        culpa delectus dolorem ducimus enim eos inventore minus mollitia quod ratione reprehenderit sapiente voluptate?
    </div>
    <div>Accusantium consequuntur deleniti distinctio dolore dolorem, excepturi facere harum illo omnis perferendis qui,
        quis reiciendis saepe soluta vero! Aliquam commodi corporis magni repudiandae sint, soluta. Nulla officia saepe
        soluta voluptate!
    </div>
    <div>Autem commodi consequatur delectus doloribus et incidunt minus repellat. Atque consectetur delectus dolore
        doloremque hic maiores modi obcaecati possimus, praesentium quaerat quisquam rem similique sint, tempora ut
        veritatis voluptatem, voluptatum!
    </div>
    <div>Deleniti facilis fugit ipsa modi nulla, obcaecati quo? Ab atque, beatae earum exercitationem laborum magnam
        odit repellat sed veniam vero! Amet eos est ipsam itaque possimus reprehenderit voluptatem! Perspiciatis, quae?
    </div>
    <div>A animi blanditiis consectetur corporis doloribus, eaque excepturi explicabo in labore possimus praesentium,
        quia rem reprehenderit sequi tempore, totam ut voluptatibus? Architecto dolorem fugit illo iste optio quae quam
        quo.
    </div>
    <div>Commodi cumque eveniet hic! Eveniet incidunt, natus. Adipisci commodi consequatur excepturi exercitationem,
        ipsum maiores reiciendis temporibus voluptate? Accusamus aperiam cum fugit inventore magnam magni rem ullam!
        Distinctio dolore eaque molestiae.
    </div>
    <div>Alias aliquid eum fuga fugit provident quo repellat sapiente voluptas voluptate. Accusamus accusantium amet
        consectetur ea, esse est harum impedit molestias nisi nobis non quae, repellendus saepe sed sit temporibus.
    </div>
    <div>Distinctio dolorum reiciendis sint! Magni pariatur possimus rerum sapiente. Amet aut beatae consectetur ea eum
        exercitationem magni maiores minima nemo officia optio, reiciendis repellendus repudiandae tempore temporibus
        totam ut, voluptatem?
    </div>
    <div>Ea laudantium necessitatibus perferendis quis repellendus saepe ullam vitae, voluptatem. Aliquid aspernatur
        cumque dolore eius explicabo maiores mollitia natus necessitatibus nostrum unde! Cupiditate eligendi
        exercitationem saepe similique unde. Fugiat, illum.
    </div>
    <div>Ad consequuntur nisi repellendus voluptate! Adipisci amet atque consequatur dolor fuga magnam quo quos saepe.
        Accusantium cupiditate deserunt eveniet excepturi exercitationem explicabo, incidunt porro quasi recusandae rem
        sunt tempora vel.
    </div>
    <div>Debitis deserunt illo impedit incidunt natus numquam officiis omnis optio possimus praesentium provident
        reprehenderit rerum, saepe, sunt suscipit veritatis vitae! Amet, cumque dolor expedita libero modi nam nihil
        ullam vitae!
    </div>
    <div>Ab accusamus ea iusto nemo, quaerat unde. Ipsum rerum, tenetur? Beatae consequatur consequuntur fugiat minima?
        Autem consequuntur corporis ea eaque excepturi, placeat quaerat reiciendis sapiente voluptatem voluptatum!
        Eveniet, maxime, quia?
    </div>
    <div>A accusantium aperiam commodi culpa cum cumque, eaque enim ex, in ipsum iusto maiores modi molestiae nam natus
        nostrum nulla officia optio quaerat, quia quidem repudiandae sapiente similique ut veritatis?
    </div>
    <div>Eligendi illum laudantium nihil pariatur saepe vel vero! Asperiores assumenda cupiditate doloremque, doloribus
        enim eveniet fuga illo ipsum minus neque officiis praesentium quisquam quos repellendus tenetur veniam voluptate
        voluptatem voluptatum.
    </div>
    <div>Ab aliquid amet animi, assumenda consectetur corporis cum dolorem eligendi enim fuga illo iusto minus neque
        quisquam recusandae temporibus ullam veniam! Dolor dolorem, eaque enim in officiis saepe vitae! Laboriosam.
    </div>
    <div>Ab, accusantium ad alias aspernatur assumenda aut autem beatae corporis debitis deleniti, distinctio ducimus
        enim incidunt laborum molestias necessitatibus nobis non porro quis quo, ratione rem repellendus sequi suscipit
        velit?
    </div>
    <div>Atque illum libero neque quis. Ipsa, quidem, reiciendis. Accusantium eveniet facilis fuga hic iure maiores nam
        perferendis quidem totam veritatis. Ducimus magni nobis vel veritatis. Expedita minima officia qui sapiente.
    </div>
    <div>Atque autem dolorem libero perferendis veritatis. Aut beatae consequuntur distinctio dolores doloribus,
        excepturi exercitationem, inventore laborum magni minima molestias mollitia nobis non nulla obcaecati officiis
        quasi quod ratione vero voluptate!
    </div>
    <div>Adipisci, alias architecto, aspernatur dolor et harum iure qui quos ratione rerum soluta voluptates
        voluptatibus! Accusamus commodi consectetur, consequatur, debitis esse inventore minus necessitatibus, nulla
        numquam quo quod ratione vero!
    </div>
    <div>Eum nostrum vitae voluptas. A autem consequuntur culpa eos, eveniet excepturi exercitationem fuga fugit ipsum
        iste labore minus nihil, porro quae quo repudiandae sapiente! Dignissimos dolorum fuga itaque possimus
        repellendus.
    </div>
    <div>Alias aliquam aspernatur cupiditate delectus deleniti dolorem ipsum natus nihil optio possimus quam quidem
        saepe, sint ullam vel! Adipisci consectetur culpa delectus impedit itaque magni quae quia, quos ullam veniam!
    </div>
    <div>Alias at beatae consequatur deleniti ea eaque enim fugit illo illum laudantium minus nesciunt nisi nostrum
        possimus quaerat qui repellendus sapiente sed similique suscipit tenetur ullam vel, veritatis voluptatem
        voluptatum.
    </div>
    <div>Adipisci assumenda delectus distinctio est eveniet fuga hic ipsam iure laudantium magnam minus molestias
        mollitia, non nostrum nulla optio praesentium quae quaerat quas quasi quod, ratione reiciendis suscipit velit
        veritatis.
    </div>
    <div>Animi at blanditiis culpa ducimus fuga, harum id libero maiores minus molestiae numquam odio perspiciatis porro
        ratione recusandae repellat repellendus repudiandae sapiente similique tempore unde veritatis voluptas
        voluptate? Libero, optio!
    </div>
    <div>Magni quo sit veritatis? Animi debitis, et facilis iste magnam molestiae optio quia recusandae rerum! Ab cumque
        iusto nemo pariatur possimus repudiandae totam vel! Autem corporis debitis error impedit quo.
    </div>
    <div>Blanditiis, culpa debitis ea illo illum maxime quibusdam! A explicabo, officiis. A ab asperiores harum hic
        magnam molestiae quas quos saepe sed veniam? Assumenda dolor ipsum maiores maxime minima veniam?
    </div>
    <div>Ad aliquid commodi corporis debitis dicta, est eum eveniet facere illo minus nemo, nihil nobis nulla optio
        pariatur placeat quae quasi qui ratione rem repellat sequi sint temporibus. Eum, incidunt.
    </div>
    <div>Aliquid aperiam atque consequatur culpa, delectus dolorum eius exercitationem fugiat illo ipsa ipsum iste
        magnam, maxime nihil perferendis quidem quo quod ratione recusandae veritatis! Alias illo ipsum voluptatibus?
        Iste, sed.
    </div>
    <div>Aliquam architecto corporis deleniti deserunt dolores, eligendi eveniet explicabo fuga harum, iste iure
        laboriosam laudantium molestiae nam necessitatibus nulla obcaecati odio quibusdam, rerum similique sit suscipit
        tempora veniam veritatis voluptatum!
    </div>
    <div>Animi assumenda beatae consectetur consequatur dicta dignissimos, dolor doloremque ea eos esse est, eum fugiat
        libero magni nulla odio, optio porro quas quidem ratione reprehenderit sint suscipit voluptatem? Hic, natus.
    </div>
    <div>Facilis ipsum minus non placeat quibusdam, quo recusandae repellat repudiandae soluta sunt. Accusamus
        asperiores laboriosam nemo rerum similique sint tenetur unde voluptatum. Doloremque dolorum fugiat odio quam?
        Ipsa numquam, saepe!
    </div>
    <div>Consequuntur enim eveniet itaque iusto nostrum numquam reprehenderit sit soluta! Adipisci architecto asperiores
        commodi distinctio, dolor dolores, est iure neque nihil nobis nostrum nulla pariatur quas soluta suscipit
        tenetur veniam?
    </div>
    <div>Aliquam eaque explicabo fuga fugiat minus numquam odio perferendis quam similique unde? Aspernatur consectetur
        corporis, cum deleniti dolores earum eius est iusto modi, molestiae, nesciunt obcaecati quos sint sit veritatis!
    </div>
    <div>Amet beatae consectetur, culpa cum deleniti dicta eius error esse eveniet hic illo illum iste laborum minima
        minus natus officiis quaerat quasi quibusdam quis reprehenderit saepe suscipit tempore totam ullam.
    </div>
    <div>Accusantium ad aspernatur at blanditiis consectetur corporis dicta doloribus, ea eius eligendi, et excepturi
        incidunt ipsa labore maiores mollitia necessitatibus nisi omnis perferendis placeat quis quo suscipit temporibus
        ut voluptates.
    </div>
    <div>Aspernatur earum est in magnam nulla, quam quisquam quos suscipit voluptatem voluptates. Amet consequatur
        dolorem ea earum itaque placeat ullam? Alias doloremque dolorum ducimus eaque eligendi error, iste provident
        sint!
    </div>
    <div>Cupiditate ducimus iure nisi, non perspiciatis quasi similique voluptatum. Aperiam architecto asperiores
        dignissimos, dolorum eius eveniet, illum laboriosam magni maxime mollitia pariatur perferendis quidem quisquam,
        quo sequi ut voluptatibus! Id.
    </div>
    <div>A atque, beatae culpa cum dicta dignissimos eius enim eum facilis fuga fugit itaque iusto magni nesciunt nobis
        nulla odio perspiciatis porro possimus quo sed soluta temporibus unde ut, voluptate.
    </div>
    <div>Dolorem dolorum eveniet laboriosam quas rerum. Eos facere hic nesciunt numquam reiciendis! Atque, blanditiis
        culpa dolorem dolores eius eveniet exercitationem fugit inventore ipsa magnam molestias nihil quae sed vero
        voluptates!
    </div>
    <div>Aperiam iste minima quas quis sapiente. Accusantium ad animi, asperiores autem cumque dolorum eos eveniet,
        inventore iure maiores necessitatibus nihil nisi perferendis quam quibusdam quis repellendus reprehenderit ut
        velit voluptatum.
    </div>
    <div>Atque autem consectetur consequatur debitis dolorum earum eius ex exercitationem illum ipsam modi molestias
        nemo numquam pariatur perspiciatis placeat quaerat qui, quos saepe veniam. Adipisci distinctio ducimus eum
        fugiat neque.
    </div>
    <div>Atque, delectus dolores eligendi eveniet iste quam. Consequuntur doloribus eligendi expedita fuga iste magni,
        maxime minima nam nihil non odit praesentium quam quis, rem sed similique temporibus voluptate voluptatibus,
        voluptatum!
    </div>
    <div>Eligendi expedita molestiae neque nulla rem tempora veniam. A ab assumenda debitis distinctio doloremque eos et
        fugiat iusto libero magni provident, quaerat quam quas rerum similique tempore totam vel voluptatum.
    </div>
    <div>Atque aut consequatur cum et fugit harum ipsam minus natus, numquam quaerat quas quod, rerum tempora tenetur,
        vero. At commodi dolor dolores id iste magni molestiae mollitia obcaecati ut voluptates!
    </div>
    <div>Cupiditate dolores esse et eum facere necessitatibus nesciunt nulla praesentium, provident, quam quia, sint
        velit voluptas. Consectetur corporis cum et nemo optio suscipit tempore vitae! Aspernatur laborum omnis quis
        voluptatum?
    </div>
    <div>Animi at explicabo id maiores odio quo tempora vero? Autem consequuntur enim, excepturi facere illum iure iusto
        labore libero, natus nulla quae sed, sequi vitae! Ab eligendi enim facilis voluptatem!
    </div>
</div>

</div>
<script>
    let btnE = document.querySelector('#btn');
    btnE.addEventListener('click',function (){
        alert('点击了按钮2！')
    })
    let spanE = document.querySelector('span');
    spanE.addEventListener('mouseover',function (){
        console.log('该娱乐标题被用户查看了1次！')
    })

    window.addEventListener('scroll',function (){
        console.log('用户在页面滚动了！')
    })
    window.addEventListener('resize',function (){
        console.log('用户在页面调整了尺寸！')
    })
    document.addEventListener('visibilitychange',function (){
        if (document.visibilityState === 'hidden'){
            console.log('用户离开了页面！')
        }else {
            console.log('用户返回了页面！')
        }
    })
</script>
</body>
</html>